<template>
  <!-- <div class e="head-div"></div> -->
  <div class="layout-container">
    <el-splitter class="divs">
      <el-splitter-panel collapsible v-model:size="leftSize" min="300">
        <el-container class="header-container">
          <el-header class="header">
              <Class />
          </el-header>
          <el-main class="left-menu"><!-- 左侧区域 -->
            <LeftPanle @resize-start="startResize" @update:width="leftWidth = $event" />
          </el-main>
        </el-container>
      </el-splitter-panel>

      <el-splitter-panel :min="600" class="center-panel" v-model:size="centerSize">
        <el-container class="header-container">
          <el-header class="header header-center" v-if="currentUser.role === 1">
              <headMenus />
          </el-header>
          <el-header class="header header-center"  v-if="currentUser.role === 0">
              <headMenu />
          </el-header>
          <el-main v-if="currentUser.role === 0" style="width: 99%;padding: 1.1vw 0.1vw 0 -1px;"> <!-- 中间区域 -->
            <CenterPanle @open-ai="openai" />
          </el-main>
            <el-main v-else-if="currentUser.role === 1" style="width: 99%;padding: 1.1vw 0.1vw 0 -1px;"><!-- 中间区域 -->
            <CenterPanleStudent @open-ai="openai"  />
          </el-main>
        </el-container>
      </el-splitter-panel>

      <el-splitter-panel collapsible v-model:size="rightSize" min="400" style="display: flex;">
        <el-container class="header-container">
          <el-header class="header header-right">
            <div>
              <UserAvatar/>
            </div>
          </el-header>
          <el-main> <!-- 右侧区域 -->
            <RightPanle @close="close" />
          </el-main>
        </el-container>
      </el-splitter-panel>
    </el-splitter>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LeftPanle from '@/components/index-left/index.vue'
import LeftPanleStudent from '@/components/index-left-s/index.vue'
import CenterPanle from '@/components/index-center/index.vue'
import RightPanle from '@/components/index-right/indexTest10.vue'
import Class from '@/components/index-left/index-class/index.vue'
import headMenu from '@/components/index-center/head-menu/index.vue'
import headMenus from '@/components/index-center-s/head-menu/index.vue'
import CenterPanleStudent from '@/components/index-center-s/index.vue'
import UserAvatar from '@/components/UserAvatar.vue'
import { useUserStore } from '@/stores/userStore'
const userStroe = useUserStore()
const currentUser = userStroe.user

const leftSize = ref(350)
const rightSize = ref(400)

</script>

<style scoped>
.header {
  /* 让 header 在各自 panel 内自适应宽度 */
  background: #56b0c3;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.10);
  border-radius: 18px;
  height: 54px;
  min-width: 80px;
  width: 96%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  margin: 0.1vw 0 0 0.1vw;
  overflow: visible;
  box-sizing: border-box;
}
.header-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.header-right{
  justify-content: flex-end;
}
.layout-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 95vh;
  width: 99vw;
  overflow: hidden;
  /* header 不再固定，无需额外顶部间距 */
}

.left-panel {
  border-right: 1px solid #dcdfe6;
}

.right-panel {
  border-left: 1px solid #dcdfe6;
}

.center-panel {
  flex: 1;
  overflow: hidden;
}
.left-menu {
  background: var(--theme-bg-color, #cbd2dc);
  border-radius: 14px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
  padding: 4px 8px;
  margin: 1.1vw 0 0 0.1vw;
  width: 96%;
  min-height: 80vh;
  box-sizing: border-box;
  /* 可选：让内容顶部有一定距离 */
  /* display: flex; flex-direction: column; */
}
</style>
